<template>
	<div class="login">
		<div class="title clearfix">
			<div class="logo fl">
				<Logo></Logo>
			</div>
			<div class="name fl">京西商城</div>
			<div class="name fl">欢迎登陆</div>
		</div>
		<div class="login-info">
			<div class="login-content">
				<form action="/login/">
					<div class="login-text">
						<div class="title">
							<span class="iconfont icon-tishi"></span>
							我不会以任何理由要求你转账，谨防诈骗。
						</div>
						<div class="login-name">
							账户登录
						</div>
						<div class="login-username">
							<label for="username">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="text" id="username" placeholder="请输入你的邮箱" v-model="userInfo.name"/>
						</div>
						<div class="login-password">
							<label for="password">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="password" id="password" placeholder="请输入密码" v-model="userInfo.password"/>
						</div>
						<a href="#" class="forgrt-password">忘记密码</a>
						<button class="login-commit" @click.prevent="login">登录</button>
						<div class="register">
							<a href="#">立即注册</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import Logo from "@/components/common/Logo.vue"
import {loginRequest} from "@/network/user.js"
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore()
const router = useRouter()

let userInfo=reactive({
	name:"",
	password:""
})

const login=()=>{
	console.log(userInfo)
	loginRequest(userInfo).then(res=>{
		if(res.status==4000){
			alert("登陆成功")
			window.localStorage.setItem("name", res.data.name);
			window.localStorage.setItem("token", res.data.token);
			store.commit("setIsLogin", true);
			store.commit("setName", res.data.name);
			router.push("/")
		}else{
			alert("登陆失败")
		}
		console.log(res.status)
		console.log(res.data)
	}).catch(error=>{
		console.log(error.status)
		console.log(error.data)
	})
}
</script>

<style lang="less" scoped>
	.login{
		.title{
			width: 1000px;
			margin: auto;
			height: 80px;
			.login{
				height: 40px;
			}
			.name{
				font-size: 30px;
				margin-left: 10px;
				// vertical-align: middle;
				margin-top: 30px;
			}
		}
		.login-info{
			margin-top: 50px;
			background-color: #e93854;
			.login-content{
				width: 990px;
				height: 475px;
				margin: 0 auto;
				// background-image: url("C:\Users\HP\Pictures\Screenshots\屏幕截图 2024-04-23 211247.png");
				.login-text{
					margin-top: 20px;
					width: 350px;
					height: 380px;
					background-color: #fff;
					float: right;
					.title{
						background-color: #fff8f0;
						height: 40px;
						width: 350px;
						color: #999;
						line-height: 40px;
						text-align: center;
						span{
							width: 16px;
							height: 16px;
						}
					}
					.login-name{
						height: 40px;
						width: 350px;
						color: #999;
						line-height: 40px;
						text-align: center;
						color: #e93854;
						font-size: 18px;
						font-weight: 700px;
						border-bottom: 1px solid #f4f4f4;
					}
					.login-username,.login-password{
						border: 1px solid #bdbdbd;
						width: 310px;
						height: 40px;
						margin: 30px;
						line-height: 40px;
						label{
							display: inline-block;
							background-color: #f4f4f4;
							width: 40px;
							text-align: center;
							line-height: 40px;
							border-right: 1px solid #bdbdbd;
							span{
								height: 20px;
								width: 20px;
							}
							input{
								padding-left: 10px;
							}
						}
					}
					.forgrt-password{
						display: block;
						color: #666;
						text-align: right;
						margin-top: 20px;
						margin-left: 20px;
						&:hover{
							color: #e93835;
						}
					}
					.login-commit{
						width: 310px;
						height: 35px;
						background-color: #e93835;
						color: white;
						margin-top: 20px;
						font-size: 20px;
						margin-left: 20px;
					}
					.register{
						margin-top: 20px;
						background-color: #fcfcfc;
						height: 50px;
						width: 350px;
						line-height: 50px;
						text-align: right;
						color: #e93835;
						a{
							color: #e93854;
							margin-left: 20px;
							font-size: 18px;
							margin-right: 20px;
						}
					}
				}
			}
		}
	}
</style>